<template>
  <div id="box">
      <div id="zhong">
          <div id="wenzi">暖心应季</div>
          <div id="yi">
              <div id="er" v-for="v in arr" :key="v.id">
                  <div id="a">
                      <img :src="v.img" alt="">
                  </div>
                  <div id="b">{{v.name}}</div>
                  <div id="c">{{v.jiage}}</div>
              </div>

          </div>
          
      </div>
  </div>
</template>

<script>
import getlink from "../../../../api/apiserver"
export default {
data() {
    return {
        id:0,
        arr:[]
    }
},
mounted(){
    getlink("http://localhost:3000/baokaun").then((ok)=>{
        this.arr=ok.data
        this.arr.splice(0,30)
    })
}
}
</script>

<style scoped>
#box{
    width: 100%;
    margin-top: 0.1rem;
}
#zhong{
    width: 94.6667vw;
    margin: auto;
    background-color: #ffffff;
    border-radius: 0.1rem;
}
#wenzi{
  width: 94.6667vw;
    height: 12vw;
    font-size: 4.4667vw;
    font-weight: 800;
    line-height: 12vw;
    color: #000111;
    margin-left: 0.1rem;
}
#yi{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#er{
    width: 29.0667vw;
    height: 41.8667vw;
}
#a{
width: 29.0667vw;
    height: 29.0667vw;
}
#b{
     font-size: 3.7333vw;
    margin-top: 2.1333vw;
    width: 26.4vw;
    height: 5.3333vw;
    line-height: 5.3333vw;
    color: rgb(51, 51, 51);
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    position: static;
    text-align: center;
    text-overflow: ellipsis;
}
#c{
    width: 26.4vw;
    height: 4.8vw;
    font-size: 4.8vw;
    color: rgb(242, 29, 29);
    line-height: 4.8vw;
    text-align: center;
}
</style>